<template>
  <div>
    <el-form ref="form" :model="form" label-width="180px">
      <el-form-item v-for="(col, key) in formCols" :label="col.label" :key="key">
        <el-input v-if="col.type === 'input'" v-model="form[col.prop]" ></el-input>
        <el-input-number v-else-if="col.type === 'number'" v-model="form[col.prop]" controls-position="right" :min="0"></el-input-number>
        <el-select v-else-if="col.type === 'select'" v-model="form[col.prop]" placeholder="请选择">
          <el-option
            v-for="item in options[col.prop]"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <div v-else-if="col.type === 'select2'">
          <el-select v-model="form['subjectParentId']" placeholder="请选择" @change="v => getSubjectList(v)" style="margin-right: 10px">
            <el-option
              v-for="item in options['subjectParentId']"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="form['subjectId']" placeholder="请选择">
            <el-option
              v-for="item in options['subjectId']"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-upload
          v-else-if="col.type === 'image'"
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" width="256" height="256">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <vue-tinymce
          v-else-if="col.type === 'markdown'"
          v-model="form[col.prop]"
          :setting="setting" />
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="handleSaveAndNext">保存并下一步</el-button>
  </div>
</template>

<script>
import {formCols, setting} from '@/views/edu/course/cols';

export default {
  name: 'step1',
  props: {
    courseId: {
      type: String,
      default: '',
      setting
    }
  },
  data() {
    return {
      formCols,
      form: {}, // 表单信息
      options: {}, // 选择框
      imageUrl: 'https://guli-oos-test-2022.oss-cn-guangzhou.aliyuncs.com/test/2022-03-28/1508448907681980416/2.jpeg',
      isEdit: false
    }
  },
  computed: {
    action() {
      return window.config.baseUrl + '/oss-service/file/upload';
    }
  },
  created() {
    this.isEdit = this.courseId.length > 0;
    if(this.isEdit) {
      this.getCourseInfo();
    }
    this.getTeacherList();
    this.getSubjectList('0');
  },
  methods: {
    _set(key, data) {
      this.$set(this.options, key, data);
    },
    getTeacherList() {
      return this.$api.api_edu.queryAllTeacher().then(res => {
        if(res.success && res.data && res.data.data) {
          let data = res.data.data;
          data.forEach(item => {
            item.value = item.id;
            item.label = item.name;
          })
          this._set('teacherId', data);
        }
      })
    },
    getSubjectList(pid) {
      let key = pid === '0' ? 'subjectParentId' : 'subjectId';
      return this.$api.api_edu.querySubjectByPid(pid).then(res => {
        if(res.success && res.data && res.data.data) {
          let data = res.data.data;
          data.forEach(item => {
            item.value = item.id;
            item.label = item.title;
          })
          this._set(key, data);
        }
      })
    },
    getCourseInfo() {
      this.$api.api_edu.queryCourseInfo(this.courseId).then(res => {
        if(res.success && res.data && res.data.data) {
          this.form = res.data.data;
          this.imageUrl = this.form.cover;
          this.getSubjectList(this.form.subjectParentId);
        }
      })
    },
    handleAvatarSuccess(res, file) {
      // 保存文件图片封面路径
      this.form.cover = res.data.path;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isJPG && isLt2M;
    },
    handleSaveAndNext() {
      this.$refs.form.validate(flag => {
        if(flag) {
          if(this.isEdit) {
            this.doUpdate();
          } else {
            this.doSave();
          }

        }
      })
    },
    doSave() {
      this.handleSave().then(res => {
        if(res.success) {
          this.$emit('save-finish', res.data.id);
          this.$message.success('添加成功');
          this.handleNext();
        }
      })
    },
    doUpdate() {
      this.handleUpdate().then(res => {
        if(res.success) {
          this.$emit('update-finish', res.data.id);
          this.$message.success('更新成功');
          this.handleNext();
        }
      })
    },
    handleSave() {
      if(!this.form.cover) {
        this.form.cover = this.imageUrl;
      }
      return this.$api.api_edu.addCourse(this.form);

    },
    handleUpdate() {
      if(!this.form.cover) {
        this.form.cover = this.imageUrl;
      }
      return this.$api.api_edu.updateCourse(this.form);

    },
    handleNext() {
      this.$emit('next', 1);
    }
  }
}
</script>